<template>
	<view>
		<hl-scrollTopSticky :sticky="true" class="refresh-list-view" @init="mescrollInit" @down="downCallback" :up="upOption">
			<view class="videoWrap">111</view>
			<view class="xmContent" :style="{height: topHeight+'px', overflow:'hidden'}">
				<view class="innerWrap padd">
					<view class="xmInfo">
						<view class="xmName">第一节 心理健康系列</view>
						<view class="xmSmInfo">发布时间：2024-05-20 15:20-20</view>
						<view class="xmSmInfo">服务讲师：<text>李三利</text><text>李三利1</text></view>
						<view class="xmSmInfo">组织方：<text>濮阳市心理咨询师协会</text></view>
						<view class="xmSmInfo otherCol">服务对象：100人</view>
					</view>
					<view class="detModTit">
						<text class="iconfont icon-qyMenu"></text>
						<text>服务方向</text>
					</view>
					<view class="xmIntro">反倒是来看广泛的交流高科技的的时间了科技股放到沙发上官方打工来看多久发的睡觉了分开家说份的给大家立发的说说广泛的交流K歌换个房间联合开发计划刻感觉到发的睡觉了分开的时间发了过分的</view>
					<view class="detModTit">
						<text class="iconfont icon-qyMenu"></text>
						<text>评论</text>
					</view>
				</view>
			</view>
			<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
			<view class="plTabs">
				<pl-tab :tabIndex="tabIndex" :plTabArr="plTabArr" @switchPlTab="switchPlTab"></pl-tab>
			</view>
			<!-- 数据列表 -->
			<swiper :style="{height: swiperHeight}" :current="tabIndex" @change="swiperChange">
				<swiper-item v-for="(tab,i) in plTabArr" :key="i">
					<good-list ref="mescrollItem" :i="i" :index="tabIndex" :tabs="plTabArr" :height="swiperHeight" :disable-scroll="disableScroll"></good-list>
				</swiper-item>
			</swiper>
			<!-- <pl-list></pl-list> -->
		</hl-scrollTopSticky>
		<view class="pubPl alignCen">
			<text class="iconfont icon-qqPubPl"></text>
			<text>评论</text>
		</view>
	</view> 
</template>

<script>
	//zy zb
	import PlTab from './components/PlTab.vue'
	import PlList from './components/PlList.vue'
	import goodList from './pageview/goodList.vue'
	export default {
		components:{
			PlTab,
			PlList,
			goodList
		},
		data(){
			return{
				mescroll: null ,//mescroll实例对象,
				upOption:{
					use: false // 主体框架只启用下拉刷新
				},
				topHeight:0,
				swiperHeight: "",
				//plTabArr:[{id:1,name:'组织方'},{id:2,name:'讲师'}],
				plTabArr:[{name:'全部'}, {name:'奶粉'}, {name:'图书'}],
				tabIndex: 0,
				disableScroll: true // swiper列表是否禁止滚动
			}
		},
		watch: {
			tabIndex(i) {
				if(this.disableScroll){
					this.disableScroll = false
					this.$nextTick(()=>{
						let mescroll = this.getMescroll(i)
						mescroll && mescroll.scrollTo(0,0)
						setTimeout(()=>{
							this.disableScroll = true
						},300)
					})
				}
			}
		},
		onLoad(){
			this.$nextTick(()=>{
				uni.createSelectorQuery().select('.innerWrap').boundingClientRect(data => {
					//console.log(data)
					this.topHeight = data.height + uni.upx2px(55);
				}).exec()
			})
			// 需要固定swiper的高度 (需减去悬浮tabs的高度60rpx)
			this.swiperHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(60) - uni.upx2px(420) + 'px'
		},
		mounted() {
			// #ifdef H5
			uni.pageScrollTo({scrollTop: 0,duration: 0}) // 刷新浏览器,重置滚动条
			// #endif
		},
		
		//注册系统自带的下拉刷新
		onPullDownRefresh(){
			this.mescroll && this.mescroll.onPullDownRefresh();
		},
		//注册列表滚动事件,用于判定在顶部可下拉刷新
		onPageScroll(e) {
			this.mescroll && this.mescroll.onPageScroll(e);
		},
		//注册滚动到底部的事件,用于上拉加载 
		onReachBottom() {
			this.mescroll && this.mescroll.onReachBottom();
		},
		methods:{
			switchPlTab(index){
				this.tabIndex = index;
			},
			downCallback() {
				this.mescroll.endSuccess()
			},
			// 轮播菜单
			swiperChange(e){
				this.tabIndex = e.detail.current
			},
			// 获取指定下标的mescroll对象
			getMescroll(i){
				let mescrollItems = this.$refs.mescrollItem;
				if(mescrollItems){
					let item = mescrollItems[i]
					if(item) return item.mescroll
				}
				return null
			},
			// 页面的滚动事件
			onPageScroll(e){
				this.disableScroll = Math.ceil(e.scrollTop) < (this.topHeight - 1 )
				
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/scss/qyXmDet.scss";
</style>